import React, { Component } from 'react';
import './index.css'
import Top from '../../components/Top';
import axios from 'axios';
import PackItem from '../../components/PackItem';
class Package extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      name: '包月频道',
      title1:'女生',
      title2:'男生',
      title3:'热门推荐'
    }
  }
  componentDidMount() {
    axios.get('https://wxapi.chuangbie.com/wap/index/month_vip').then(res => {
        this.setState({ list: res.data.data.list })
    })
}
  render() {
    const { list, name, title1, title2, title3 } = this.state
    return (
      <div >
        <Top name={name} history={this.props.history} />
        <div className='pack_box'>
          <div className='u'>
            <img src="https://m.chuangbie.com/static/img/nvbg01.bf8c2ad3.png" alt="" />
            <div className='r'>
              <span>（ID：0）</span>
              <h3 style={{ color: 'rgb(255, 102, 80)' }}>未开通包月特权</h3>
            </div>
          </div>

          <ol>
            <li>开通包月服务可无限量阅读书城包月库的作品，阅读非包月作品，需要创币购买。</li>
            <li>包月服务自开通成功之日起有效，不自动续订，不支持退订，不支持转换。</li>
          </ol>
          <button>开通包月，尊享特权</button>
        </div>
        <PackItem data={list[1]} title={title1} history={this.props.history}/>
        <PackItem data={list[2]} title={title2} history={this.props.history}/>
        <PackItem data={list[3]} title={title3} history={this.props.history}/>
        <div style={{height:'.2rem'}}></div>
      </div>
    );
  }
}

export default Package;